<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理</title>
    <link rel="stylesheet" href="../styles/styles-main.css">
    <link rel="stylesheet" href="../styles/blog-manager.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="../modules/module-loader.js"></script>
    <script src="../modules/core-modules.js"></script>
    <script>
        // 动态加载博客管理所需模块
        document.addEventListener('DOMContentLoaded', async function() {
            try {
                await moduleLoader.loadModules([
                    ['api-client', '../scripts/api-client.js'],
                    ['navbar-main', '../scripts/navbar-main.js'],
                    ['blog-manager', '../scripts/blog-manager.js']
                ]);
                
                // 初始化博客管理
                if (typeof BlogManager !== 'undefined') {
                    const blogManager = new BlogManager();
                    blogManager.init();
                }
            } catch (error) {
                console.error('模块加载失败:', error);
            }
        });
    </script>
</head>
<body>
    <div id="navbar-container"></div>
    <div class="container">
        <nav class="sidebar">
            <ul>
                <li><a href="#" class="active" onclick="showSection('articles', event)"><i class="fas fa-file-alt"></i> 文章管理</a></li>
                <li><a href="#" onclick="showSection('categories', event)"><i class="fas fa-folder"></i> 分类管理</a></li>
                <li><a href="#" onclick="showSection('columns', event)"><i class="fas fa-columns"></i> 栏目管理</a></li>
                <li><a href="#" onclick="showSection('comments', event)"><i class="fas fa-comments"></i> 评论管理</a></li>
                <li><a href="#" onclick="showSection('i18n', event)"><i class="fas fa-globe"></i> 多语言管理</a></li>
            </ul>
        </nav>
        <main class="content" id="content">
            <!-- 文章管理部分 -->
            <div id="articles-section" class="section active">
                <!-- 博客数据统计面板 -->
                <div class="blog-stats-panel">
                    <div class="stats-header">
                        <h2>博客数据概览</h2>
                        <button class="refresh-stats-btn" onclick="refreshBlogStats()">
                            <i class="fas fa-sync-alt"></i> 刷新数据
                        </button>
                    </div>
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-value" id="total-articles">0</div>
                                <div class="stat-label">总文章数</div>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-eye"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-value" id="total-views">0</div>
                                <div class="stat-label">总浏览量</div>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-heart"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-value" id="total-likes">0</div>
                                <div class="stat-label">总点赞数</div>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-comments"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-value" id="total-comments">0</div>
                                <div class="stat-label">总评论数</div>
                            </div>
                        </div>
                    </div>
                    <div class="recent-stats">
                        <h3>最近7天数据</h3>
                        <div class="recent-grid">
                            <div class="recent-item">
                                <span class="recent-label">新增文章:</span>
                                <span class="recent-value" id="recent-articles">0</span>
                            </div>
                            <div class="recent-item">
                                <span class="recent-label">新增浏览量:</span>
                                <span class="recent-value" id="recent-views">0</span>
                            </div>
                            <div class="recent-item">
                                <span class="recent-label">新增点赞:</span>
                                <span class="recent-value" id="recent-likes">0</span>
                            </div>
                            <div class="recent-item">
                                <span class="recent-label">新增评论:</span>
                                <span class="recent-value" id="recent-comments">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="blog-header">
                    <h1>文章管理</h1>
                    <div style="display: flex; gap: 10px;">
                        <button class="create-btn" onclick="window.location.href='editor.html'">+ 创作</button>
                        <button class="create-btn" style="background: #722ed1;" onclick="BlogManager.showI18nPublishModal()">
                            <i class="fas fa-globe"></i> 多语言发布
                        </button>
                    </div>
                </div>
                
                <div class="blog-tabs">
                    <button class="tab-btn active" onclick="showTab('all')">全部文章</button>
                    <button class="tab-btn" onclick="showTab('drafts')">草稿箱</button>
                    <button class="tab-btn" onclick="showTab('trash')">回收站</button>
                </div>
                
                <!-- 全部文章列表 -->
                <div id="all-articles" class="tab-content active">
                    <div class="article-list" id="article-list">
                        <!-- 动态加载文章列表 -->
                    </div>
                </div>
                
                <!-- 草稿箱 -->
                <div id="drafts" class="tab-content">
                    <div class="article-list" id="draft-list">
                        <!-- 动态加载草稿列表 -->
                    </div>
                </div>
                
                <!-- 回收站 -->
                <div id="trash" class="tab-content">
                    <div class="article-list" id="trash-list">
                        <!-- 动态加载回收站列表 -->
                    </div>
                </div>
            </div>

            <!-- 分类管理部分 -->
            <div id="categories-section" class="section">
                <div class="blog-header">
                    <h1>分类管理</h1>
                    <button class="create-btn" onclick="showCategoryModal()">+ 新建分类</button>
                </div>
                
                <div class="categories-grid" id="categories-grid">
                    <!-- 动态加载分类列表 -->
                </div>
            </div>

            <!-- 栏目管理部分 -->
            <div id="columns-section" class="section">
                <div class="blog-header">
                    <h1>栏目管理</h1>
                    <button class="create-btn" onclick="showColumnModal()">+ 新建栏目</button>
                </div>
                
                <div class="columns-grid" id="columns-grid">
                    <!-- 动态加载栏目列表 -->
                </div>
            </div>

            <!-- 评论管理部分 -->
            <div id="comments-section" class="section">
                <div class="blog-header">
                    <h1>评论管理</h1>
                    <div class="comment-filters">
                        <button class="filter-btn active" onclick="showCommentTab('all')">全部评论</button>
                        <button class="filter-btn" onclick="showCommentTab('pending')">待审核</button>
                        <button class="filter-btn" onclick="showCommentTab('approved')">已通过</button>
                        <button class="filter-btn" onclick="showCommentTab('featured')">精选评论</button>
                    </div>
                </div>
                
                <!-- 批量操作工具栏 -->
                <div class="batch-toolbar" id="comment-batch-toolbar" style="display: none;">
                    <span id="selected-count">已选择 0 条评论</span>
                    <div class="batch-actions">
                        <button class="btn-small" onclick="batchApproveComments()">批量通过</button>
                        <button class="btn-small" onclick="batchRejectComments()">批量拒绝</button>
                        <button class="btn-small" onclick="batchFeatureComments()">批量精选</button>
                        <button class="btn-small" onclick="batchUnfeatureComments()">取消精选</button>
                        <button class="btn-small btn-danger" onclick="batchDeleteComments()">批量删除</button>
                        <button class="btn-small" onclick="clearCommentSelection()">取消选择</button>
                    </div>
                </div>
                
                <!-- 评论列表 -->
                <div class="comments-container" id="comments-container">
                    <!-- 动态加载评论列表 -->
                </div>
                
                <!-- 分页 -->
                <div class="pagination" id="comment-pagination">
                    <!-- 动态加载分页 -->
                </div>
            </div>
        </main>
    </div>

    <!-- 分类编辑模态框 -->
    <div id="category-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="category-modal-title">新建分类</h3>
                <span class="close" onclick="closeCategoryModal()">&times;</span>
            </div>
            <div class="modal-body">
                <form id="category-form">
                    <div class="form-group">
                        <label for="category-name">分类名称:</label>
                        <input type="text" id="category-name" required>
                    </div>
                    <div class="form-group">
                        <label for="category-slug">URL别名:</label>
                        <input type="text" id="category-slug">
                    </div>
                    <div class="form-group">
                        <label for="category-description">描述:</label>
                        <textarea id="category-description" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="category-parent">父分类:</label>
                        <select id="category-parent">
                            <option value="">无父分类</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="category-sort">排序:</label>
                        <input type="number" id="category-sort" value="0">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeCategoryModal()">取消</button>
                <button class="btn btn-primary" onclick="saveCategory()">保存</button>
            </div>
        </div>
    </div>

    <!-- 栏目编辑模态框 -->
    <div id="column-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="column-modal-title">新建栏目</h3>
                <span class="close" onclick="closeColumnModal()">&times;</span>
            </div>
            <div class="modal-body">
                <form id="column-form">
                    <div class="form-group">
                        <label for="column-name">栏目名称:</label>
                        <input type="text" id="column-name" required>
                    </div>
                    <div class="form-group">
                        <label for="column-slug">URL别名:</label>
                        <input type="text" id="column-slug">
                    </div>
                    <div class="form-group">
                        <label for="column-description">描述:</label>
                        <textarea id="column-description" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="column-categories">包含分类:</label>
                        <select id="column-categories" multiple>
                            <!-- 动态加载分类选项 -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="column-sort">排序:</label>
                        <input type="number" id="column-sort" value="0">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeColumnModal()">取消</button>
                <button class="btn btn-primary" onclick="saveColumn()">保存</button>
            </div>
        </div>
    </div>

    <!-- 多语言管理模态框 -->
    <div id="i18n-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="i18n-modal-title">博客多语言管理</h3>
                <span class="close" onclick="closeI18nModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div id="i18n-modal-content">
                    <!-- 多语言管理内容将动态加载 -->
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeI18nModal()">关闭</button>
                <button class="btn btn-primary" onclick="BlogManager.saveI18nSettings()">保存设置</button>
            </div>
        </div>
    </div>

    <!-- 多语言发布模态框 -->
    <div id="i18n-publish-modal" class="modal">
        <div class="modal-content" style="max-width: 600px;">
            <div class="modal-header">
                <h3>多语言发布</h3>
                <span class="close" onclick="BlogManager.closeI18nPublishModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>选择博客文章:</label>
                    <select id="publish-blog-select" class="form-control">
                        <option value="">请选择要发布的博客文章</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>选择发布语言:</label>
                    <div id="publish-language-options" class="language-options">
                        <!-- 语言选项将动态加载 -->
                    </div>
                </div>
                <div class="form-group">
                    <label>翻译选项:</label>
                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        <label style="display: flex; align-items: center; gap: 8px;">
                            <input type="checkbox" id="auto-translate" checked>
                            <span>自动翻译内容</span>
                        </label>
                        <label style="display: flex; align-items: center; gap: 8px;">
                            <input type="checkbox" id="quality-check" checked>
                            <span>质量检查</span>
                        </label>
                    </div>
                </div>
                <div id="publish-progress" style="display: none;">
                    <div style="font-weight: 500; margin-bottom: 10px;">发布进度:</div>
                    <div class="progress-bar">
                        <div id="progress-fill" class="progress-fill"></div>
                    </div>
                    <div id="progress-text" style="text-align: center; margin-top: 5px; font-size: 12px;">准备发布...</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="BlogManager.closeI18nPublishModal()">取消</button>
                <button id="start-publish-btn" class="btn btn-primary" onclick="BlogManager.startI18nPublish()">开始发布</button>
            </div>
        </div>
    </div>

    <style>
        /* 多语言发布模态框样式 */
        .language-options {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .language-option {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            padding: 8px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        
        .language-option:hover {
            background-color: #f5f5f5;
        }
        
        .language-option input {
            margin-right: 10px;
        }
        
        .language-option label {
            flex: 1;
            cursor: pointer;
            margin: 0;
        }
        
        .language-option.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .progress-bar {
            background: #f0f0f0;
            border-radius: 10px;
            height: 20px;
            overflow: hidden;
            position: relative;
        }
        
        .progress-fill {
            background: #52c41a;
            height: 100%;
            width: 0%;
            transition: width 0.3s;
            border-radius: 10px;
        }
        
        .progress-fill.error {
            background: #f5222d;
        }
    </style>
    
    <script src="../components/blog-language-switcher.js"></script>
    <script src="../scripts/blog-manager.js"></script>
</body>
</html>